<template>
    <!-- 用户信息展示组件 -->
    <div class="top-panel">
        <el-card>
            <el-form :model="searchForm" label-width="70px" label-position="right">
                <el-row>
                    <el-col :span="4">
                        <el-form-item label="UID" label-width="30px">
                            <el-input class="password-input" v-model="searchForm.userId" clearable
                                @keyup.enter="loadDataList">
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="5">
                        <el-form-item label="昵称">
                            <el-input class="password-input" v-model="searchForm.nickName" clearable
                                placeholder="支持模糊搜索" @keyup.enter="loadDataList"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="7" :style="{ paddingLeft: '40px' }"><el-button type="success"
                            @click="loadDataList()">查询</el-button>
                    </el-col>
                    <el-col :span="3" :style="{ paddingLeft: '10px' }">
                        <el-checkbox v-model="autoRefresh" @change="autoRefreshChangeHandler">自动刷新 间隔秒数：</el-checkbox>
                    </el-col>
                    <el-col :span="3">
                        <el-input-number v-model="intervalSeconds" @change="intervalSecondsChangeHandler" :min="1"
                            label="间隔秒数" style="width: 130px"></el-input-number>
                    </el-col>
                    <el-col :span="1">
                        <div class="iconfont icon-shuaxin" style="padding-top: 7px;" @click="loadDataList"></div>
                    </el-col>
                </el-row>
            </el-form>
        </el-card>
    </div>
    <el-card class="table-data-card">
        <Table :columns="columns" :fetch="loadDataList" :dataSource="tableData" :options="tableOptions">
            <template #slotAvatar="{ row }">
                <AvatarBase :width="50" :userId="row.userId" partType="avatar"></AvatarBase>
            </template>
            <template #slotNickName="{ row }">
                {{ row.nickName }}
                <span v-if="row.gender == 0" class="iconfont icon-nvzhuang"></span>
                <span v-if="row.gender == 1" class="iconfont icon-nanzhuang"></span>
            </template>
            <template #slotUserId="{ row }">
                {{ row.userId.substring(1) }}
            </template>
            <template #slotStatus="{ row }">
                <span style="color: red" v-if="row.status == 'DISABLED' || row.status == 0">禁用</span>
                <span style="color: green" v-if="row.status == 'ENABLE' || row.status == 1">启用</span>
            </template>
            <template #slotOnline="{ row }">
                <span style="color: green" v-if="row.onlineType == 'ONLINE' || row.onlineType == 0">在线</span>
                <span style="color: #8a8a8a" v-if="row.onlineType == 'OFFLINE' || row.onlineType == 1">离线</span>
            </template>
            <template #slotOperation="{ row }">
                <el-dropdown placement="bottom-end" trigger="click" v-if="userInfo.userId != row.userId">
                    <span class="iconfont icon-gengduo1"></span>
                    <template #dropdown>
                        <el-dropdown-item @click="changeAccountStatus(row)">
                            {{ row.status == 'DISABLED' || row.status == 0 ? '启用' : '禁用' }}账号
                        </el-dropdown-item>
                        <el-dropdown-item @click="forceOffLine(row)"
                            v-if="row.onlineType == 'ONLINE' || row.onlineType == 0">强制下线</el-dropdown-item>
                    </template>
                </el-dropdown>
                <div v-else style="color: coral;">管理员</div>
            </template>
        </Table>
    </el-card>
</template>

<script setup>
import AvatarBase from "@/components/AvatarBase.vue";
import { ref, reactive, getCurrentInstance, nextTick, watch } from "vue"
import { useRoute, useRouter } from "vue-router";
const { proxy } = getCurrentInstance();
const route = useRoute();
const router = useRouter();

const userInfo = ref({})
const getUserInfo = async () => {
    let result = await proxy.Request({
        url: proxy.Api.getUserInfo,
    })
    if (!result) {
        return;
    }
    userInfo.value = result.data
}
getUserInfo()

const changeAccountStatus = (data) => {
    let status = (data.status == 'DISABLED' || data.status == 0) ? 'ENABLE' : 'DISABLED'
    let info = status == 'ENABLE' ? '启用' : '禁用'
    proxy.Confirm({
        message: `确定要【${info}】账号【${data.nickName}】吗？`,
        okFun: async () => {
            let result = await proxy.Request({
                method: 'put',
                url: proxy.Api.updateUserStatus,
                params: {
                    userId: data.userId,
                    status
                }
            })
            if (!result) {
                return;
            }
            proxy.Message.success(`账号【${info}】成功！`)
            loadDataList()
        }
    })
}

const forceOffLine = (data) => {
    proxy.Confirm({
        message: `确定要将用户【${data.nickName}】强制下线吗？`,
        okFun: async () => {
            let result = await proxy.Request({
                method: 'delete',
                url: proxy.Api.forceOffLine,
                params: {
                    userId: data.userId
                }
            })
            if (!result) {
                return;
            }
            proxy.Message.success(`用户强制下线成功！`)
            loadDataList()
        }
    })
}

const tableData = ref({})
const tableOptions = {}
const searchForm = ref({})

const loadDataList = async () => {
    let params = {
        pageNo: tableData.value.pageNo,
        pageSize: tableData.value.pageSize
    }
    params = Object.assign(params, searchForm.value)
    let result = await proxy.Request({
        url: proxy.Api.loadUser,
        params: params
    })
    if (!result) {
        return;
    }
    Object.assign(tableData.value, result.data)
}

const columns = [
    {
        label: '头像',
        prop: 'userId',
        width: 70,
        scopedSlots: 'slotAvatar'
    },
    {
        label: '昵称',
        prop: 'nickName',
        scopedSlots: 'slotNickName'
    },
    {
        label: 'UID',
        prop: 'userId',
        scopedSlots: 'slotUserId'
    },
    {
        label: '邮箱',
        prop: 'email',
        width: 200,
    },
    {
        label: '创建时间',
        prop: 'createTime',
        width: 200,
    },
    {
        label: '地区',
        prop: 'areaName',
        width: 150,
    },
    {
        label: '用户状态',
        prop: 'status',
        width: 100,
        scopedSlots: 'slotStatus'
    },
    {
        label: '在线状态',
        prop: 'onlineType',
        width: 100,
        scopedSlots: 'slotOnline'
    },
    {
        label: '操作',
        prop: 'operation',
        width: 100,
        scopedSlots: 'slotOperation'
    },
]

const autoRefresh = ref(false)
const intervalSeconds = ref(5)
let interval = null
const intervalSecondsChangeHandler = () => {
    if (interval) clearInterval(interval)
    if (autoRefresh.value) {
        interval = setInterval(() => {
            loadDataList()
        }, intervalSeconds.value * 1000)
    }
}
const autoRefreshChangeHandler = () => {
    if (interval) clearInterval(interval)
    if (autoRefresh.value) {
        loadDataList()
        interval = setInterval(() => {
            loadDataList()
        }, intervalSeconds.value * 1000)
    }
}

</script>

<style lang="scss" scoped>
.icon-nanzhuang {
    color: #2cb6fe
}

.icon-nvzhuang {
    color: #ff8094
}
</style>
